<template>
    <div class="header">
        <!-- 头部topbar -->
        <div class="sit-topbar">
            <div class="container">
                <div class="topbar-nav">
                    <a href="#">小米商城</a><span class="sep">|</span>
                    <a href="#">MIUI</a><span class="sep">|</span>
                    <a href="#">IoT</a><span class="sep">|</span>
                    <a href="#">云服务</a><span class="sep">|</span>
                    <a href="#">金融</a><span class="sep">|</span>
                    <a href="#">有品</a><span class="sep">|</span>
                    <a href="#">小爱开放平台</a><span class="sep">|</span>
                    <a href="#">企业团购</a><span class="sep">|</span>
                    <a href="#">资质证照</a><span class="sep">|</span>
                    <a href="#">协议规则</a><span class="sep">|</span>
                    <a href="#" class="topbar-download" id="topbar-download">下载app<p class="jianjiao"></p><span class="appcode" id="appcode"><img src="../assets/uploads/wx-img.png" alt="小米商城" width="90px" height="90px">小米商城APP</span></a><span class="sep">|</span>
                    <a href="#">Select Location</a><span class="sep">|</span>
                </div>
                <div class="topbar-cart">
                    <div class="cart-quan">
                        <a href="#/home/cart" class="cart"><em class="iconfont iconcart"></em><span>购物车</span><span>（0）</span></a>
                        <div class="cart-menu">购物车中还没有商品，赶紧选购吧！</div>
                    </div>
                </div>
                <div class="topbar_info">
                    <a href="#">登录</a>
                    <span class="sep">|</span>
                    <a href="#">注册</a>
                    <span class="sep">|</span>
                    <a href="#">消息通知</a>
                </div>
            </div>
        </div>
        <!-- 二级头部 -->
        <div class="site-header">
            <div class="container">
                <!-- logo -->
                <div class="header_logo"><!-- 加了个title但是不起作用   解决：a得有大小才有用--><a href="javascript:;" title="小米官网"></a></div>
                <!-- 中间 -->
                <div class="header_nav">
                    <ul class="nav-list">
                        <li class="nav-category">
                            <a href="#" class="category-a">全部商品分类</a>
                            <!-- 分类 -->
                            <div class="home-hero-category">
                                <ul class="category-list">
                                    <li class="category-item">
                                        <a href="#/home/phone"  class="title">手机  电话卡<em class="iconfont iconright"></em></a>
                                        <div class="nav-item-children">
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>Redmi 9</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-1.webp" alt=""><span>Redmi 9</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-2.webp" alt=""><span>Redmi 9</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>Redmi 9</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-4.webp" alt=""><span>Redmi 9</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>Redmi 9</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>小米10</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-1.webp" alt=""><span>小米10</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-2.webp" alt=""><span>小米10</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>小米10</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-4.webp" alt=""><span>小米10</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>小米10</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>黑鲨游戏手机</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-1.webp" alt=""><span>黑鲨游戏手机</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-2.webp" alt=""><span>黑鲨游戏手机</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>黑鲨游戏手机</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-4.webp" alt=""><span>黑鲨游戏手机</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>黑鲨游戏手机</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>移动4G专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-1.webp" alt=""><span>移动4G专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-2.webp" alt=""><span>移动4G专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>移动4G专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-4.webp" alt=""><span>移动4G专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>移动4G专区</span></a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="category-item">
                                        <a href="#" class="title">电视  盒子<em class="iconfont iconright"></em></a>
                                        <div class="nav-item-children">
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-10.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-9.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-8.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-7.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-6.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>小米电视</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-10.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-4.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>小米高清电视</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-1.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-4.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-9.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-10.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>全面屏电视</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-10.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-2.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-7.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>电视专区</span></a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="category-item">
                                        <a href="#" class="title">笔记本  显示器  平板<em class="iconfont iconright"></em></a>
                                        <div class="nav-item-children">
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-1.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-9.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-7.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-6.webp" alt=""><span>小米电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>小米电视</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-2.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-3.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-6.webp" alt=""><span>小米高清电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>小米高清电视</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-1.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-6.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-9.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-10.webp" alt=""><span>全面屏电视</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>全面屏电视</span></a></li>
                                            </ul>
                                            <ul class="nav-item-children-list">
                                                <li><a href="#"><img src="../assets/uploads/categary-0.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-10.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-2.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-6.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-7.webp" alt=""><span>电视专区</span></a></li>
                                                <li><a href="#"><img src="../assets/uploads/categary-5.webp" alt=""><span>电视专区</span></a></li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li class="category-item"><a href="#" class="title">家电  插线板<em class="iconfont iconright"></em></a></li>
                                    <li class="category-item"><a href="#" class="title">出行  穿戴<em class="iconfont iconright"></em></a></li>
                                    <li class="category-item"><a href="#" class="title">智能  路由器<em class="iconfont iconright"></em></a></li>
                                    <li class="category-item"><a href="#" class="title">电源  配件<em class="iconfont iconright"></em></a></li>
                                    <li class="category-item"><a href="#" class="title">健康  儿童<em class="iconfont iconright"></em></a></li>
                                    <li class="category-item"><a href="#" class="title">二级  音箱<em class="iconfont iconright"></em></a></li>
                                    <li class="category-item"><a href="#" class="title">生活  箱包<em class="iconfont iconright"></em></a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="nav-item" index="0">
                            <a href="#">小米手机</a>
                            <!-- 下拉框 -->
                            <div class="slide header-nav-menu">
                                <div class="container">
                                    <ul>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-0.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-1.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-2.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-3.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-4.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-5.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item" index="1">
                            <a href="#">Redmi 红米</a>
                            <!-- 下拉框 -->
                            <div class="slide header-nav-menu">
                                <div class="container">
                                    <ul>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide1-0.webp" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide1-1.webp" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide1-2.webp" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide1-3.webp" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide1-4.webp" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide1-5.webp" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item" index="1">
                            <a href="#">电视</a>
                            <!-- 下拉框 -->
                            <div class="slide header-nav-menu">
                                <div class="container">
                                    <ul>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-0.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-1.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-2.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-3.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-4.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                        <li><a href="#"><div class="xiaomishouji"><img src="../assets/uploads/slide-5.png" alt=""></div><div class="title">小米10 青春版 5G</div><p class="price">2099元起</p></a></li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item" index="1"><a href="#">笔记本</a></li>
                        <li class="nav-item" index="1"><a href="#">家电</a></li>
                        <li class="nav-item" index="1"><a href="#">路由器</a></li>
                        <li class="nav-item" index="1"><a href="#">智能硬件</a></li>
                        <li class="nav-item" index="1"><a href="#">服务</a></li>
                        <li class="nav-item" index="1"><a href="#">社区</a></li>
                    </ul>
                </div>
                <!-- 搜索 -->
                <div class="header_search">
                    <input type="text" class="search-text" placeholder="请输入...">
                    <div class="search-slide">
                        <ul class="search-list">
                            <li><a href="#">Redmi 9 五星高品质</a></li>
                            <li><a href="#">Redmi K30 Pro</a></li>
                            <li><a href="#">小米手机</a></li>
                            <li><a href="#">小米10</a></li>
                            <li><a href="#">洗衣机</a></li>
                            <li><a href="#">全部商品</a></li>
                        </ul>
                    </div>
                    <input type="submit" value="" class="search-btn">
                    <em class="iconfont iconsearch icon"></em>
                </div>
            </div>
            <!-- 线条 -->
            <div class="xiantiao">

            </div>
        </div>
    </div>
</template>
<script>
// 点到其他页面返回就没有效果了 这是因为加载了两次  在没有加layout.vue的时候
// window.onload=function(){
//     var nav_item=document.getElementsByClassName('nav-item')
//     var slide=document.getElementsByClassName('slide')
//     // console.log(nav_item);
//     for(var i=0;i<nav_item.length;i++){
//         nav_item[i].onmouseenter=function(){
//             slide[0].style.display="block"
//         }
//     }
//     for(var i=0;i<nav_item.length;i++){
//         nav_item[i].onmouseleave=function(){
//             slide[0].style.display="none"
//         }
//     }
// }

// 引入jquery  做成动画
import $ from 'jquery'
// $(function(){
//     // 存在隐式迭代
//     // nav弹出框
//     $(".nav-item").mouseenter(function(){
//         $(".slide").stop().slideDown(600)
//     })
//     $(".nav-item").mouseleave(function(){
//         $(".slide").stop().slideUp(600)
//     })
// })

// 修改之后的动画
// $(function(){
//     // nav进入
//     $(".header_nav .nav-item").mouseenter(function(){
//         if($(this).attr("index")==0){
//             $(".slide .container ul li").each(function(i,ele){
//                 //这样渲染方法可以，但是结果出不来
//                 $(ele).children("a").children("div").children("img").attr("src","../assets/uploads/phone-2.png")
//             })
//             $(".slide").addClass("quan-border")
//             $(".slide").css("height","229px")
//         }else{
//             $(".slide .container ul li").each(function(i,ele){
//                 // console.log($(ele).children("a").children("div").children("img"))
//                 $(ele).children("a").children("div").children("img").attr("src","../assets/uploads/phone-1.png")
//             })
//             $(".slide").addClass("quan-border")
//             $(".slide").css("height","229px")
//         }
//     })
//     // 下拉框进入
//     $(".slide").mouseenter(function(){
//         $(".header_nav .nav-item").mouseenter()
//         // $(".slide").css("height","229px")
//         // $(".slide").addClass("quan-border")
//     })
//     // 下拉框离开
//     $(".slide").mouseleave(function(){
//         $(".header_nav .nav-item").mouseleave()
//         // $(".slide").css("height","0px")
//         // $(".slide").removeClass("quan-border")
//     })
//     // nav离开
//     $(".header_nav .nav-item").mouseleave(function(){
//         $(".slide").css("height","0px")
//         $(".slide").removeClass("quan-border")
//     })
// })

// 一开始做的时候没做出这个效果，隔了几个月再来完善的
window.onload=function(){
    let slide=document.querySelectorAll('.slide')
    let item=document.querySelectorAll('.nav-item')
    for(let j=0;j<item.length;j++){
        item[j].addEventListener('mouseenter',transitionEnd)
    }
    function transitionEnd(){
        for(let i=0;i<slide.length;i++){
            slide[i].style.display='none'
        }
        let qqqq=this.querySelector('.slide')
        if(qqqq){
            qqqq.style.display='block'
            qqqq.style.borderBottom="1px solid #e0e0e0"
            qqqq.style.borderTop="1px solid #e0e0e0"
        }
    }
    for(let j=0;j<item.length;j++){
        item[j].addEventListener('mouseleave',function(){
            for(let i=0;i<slide.length;i++){
                slide[i].style.borderBottom="none"
                slide[i].style.borderTop="none"
            }
        })
    }
}
export default {
    data(){
        return {
            
        }
    },
    methods:{
        
    },
}
</script>
<style scoped>
/* 头部topbar */
.sit-topbar{
    position: relative;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background-color: #333;
}
.container{
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
}
/* 左边nav */
.topbar-nav{
    height: 40px;
    float: left;
    line-height: 40px;
}
.topbar-nav a{
    text-align: center;
    color: #b0b0b0;
}
.topbar-nav a:hover{
    color: #fff;
}
/* 小竖线 */
.sep{
    margin: 7px;
    color: #424242;
}
.topbar-nav .topbar-download{
    position: relative;
}
.topbar-nav .topbar-download:hover .appcode{
    height: 148px;
    display: block;
}
.topbar-nav .topbar-download:hover .jianjiao{
    display: block;
}
/* 尖三角 */
.topbar-nav .topbar-download .jianjiao{
    position: absolute;
    top: 17px;
    left: 16px;
    width: 0px;
    height: 0px;
    border-bottom: 10px solid #fff;
	border-left: 10px solid #333;
	border-right: 10px solid #333;
    display: none;
}
.topbar-nav .topbar-download .appcode{
    position: absolute;
    top: 28px;
    left: 50%;
    width: 124px;
    height: 0;
    background: #fff;
    margin-left: -60px;
    box-shadow: 0 1px 5px #aaa;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 1;
    overflow: hidden;
    /* 把鼠标放在元素上：hover，改变它下面子元素的高度 触发不了过渡*/
    /* 解决 得把display去掉 */
    /* display在的时候都是立即触发，不会有过渡 */
    transition: all .3s;
    /* display: none; */
    z-index: 20;
}
.topbar-nav .topbar-download img{
    display: block;
    margin: 18px auto 12px;
}
/* 登录注册 */
.topbar_info{
    position: relative;
    float: right;
    height: 40px;
    line-height: 40px;
}
.topbar_info a{
    text-align: center;
    color: #b0b0b0;
}
.topbar_info a:hover{
    color: #fff;
}
/* 购物车 */
.topbar-cart{
    position: relative;
    height: 40px;
    /* width: 120px; */
    margin-left: 15px;
    float: right;
    transition: all .2s;
}
/* 显示弹出框 */
.topbar-cart .cart-quan:hover .cart-menu{
    height: 100px;
}
.topbar-cart .cart-quan:hover a{
    color: #ff6700;
    background-color: #fff;
}
.topbar-cart a{
    display: inline-block;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #b0b0b0;
    background-color: #424242;
}
.topbar-cart a em{
    margin: 0 6px;
}
.topbar-cart a span{
    vertical-align: 2px
}
/* 购物车弹出框 */
.topbar-cart .cart-menu{
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 40;
    width: 316px;
    height: 0;
    line-height: 100px;
    color: #424242;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    overflow: hidden;
    text-align: center;
    transition: height .3s;
}
/* 二级头部 */
.site-header{
    position: relative;
    height: 100px;
}
/* 左边logo */
.header_logo{
    position: relative;
    float: left;
    width: 62px;
    height: 55px;
    margin-top: 22px;
    background-color: #ff6700;
    cursor: pointer;
}
.header_logo a{
    width: 55px;
    height: 55px;
    display: block;
}
/* hover怎么切换 js？ */
/* 下面已经解决 */
.header_logo::before{
    /* display: none; */
    content: '';
    position: absolute;
    width: 55px;
    top: 0;
    left: 3px;
    height: 55px;
    background: url('../assets/img/mi-home.png') no-repeat;
    background-size: 55px 55px;
    transition: all .2s;

}
.header_logo::after{
    /* display: none; */
    content: '';
    position: absolute;
    left: 65px;
    top: 0;
    width: 55px;
    height: 55px;
    background: url('../assets/img/mi-logo.png') no-repeat;
    background-size: 55px 55px;
    transition: all .2s;
}
.header_logo:hover::before{
    left: -55px;
}
.header_logo:hover::after{
    left: 5px;
}
/* 中间nav */
.header_nav{
    float: left;
    height: 100px;
    width: 850px;
}
.header_nav .nav-list{
    position: relative;
    width: 1100px;
    height: 88px;
    float: left;
    padding: 12px 0px 0px 30px;
    font-size: 16px;   
}
.header_nav .nav-category{
    position: relative;
    float: left;
    width: 127px;
    height: 88px;
    padding-right: 15px;
}
.header_nav .nav-category .category-a{
    display: block;
    padding: 26px 0 38px;
    text-align: right;
    color: #333;
    visibility: hidden;
}
.header_nav .nav-category .category-a:hover{
    color: #ff6700;
}
.header_nav .nav-category:hover .home-hero-category{
    visibility: visible!important;
}
/* 分类 */
.home-hero-category{
    width: 234px;
    height: 460px;
    font-size: 14px;
    position: absolute;
    top: 88px;
    left: -92px;
    z-index: 19;
}
.category-list{
    height: 460px;
    background: rgba(105, 101, 101, .6);
}
.home-hero-category .category-list .title{
    text-align: left;
    padding: 0;
    padding-top: 4px;
    color: #fff;
    display: block;
    margin-left: 30px;
    height: 42px;
    line-height: 42px;
}
.category-list .title em{
    position: absolute;
    right: 20px;
    font-size: 16px;
}
.category-item:hover{
    background: #ff6700;
}
.category-item:hover a{
    color: #fff!important;
}
/* 分类里面的盒子 */
.nav-item-children{
    display: none;
    position: absolute;
    left: 234px;
    top: 0;
    z-index: 24;
    height: 458px;
    width: 992px;
    border: 1px solid #e0e0e0;
    border-left: 0;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
}
.nav-item-children .nav-item-children-list{
    width: 248px;
    float: left;
    height: 458px;
    margin: 0;
    padding: 2px 0;
}
.nav-item-children .nav-item-children-list a{
    display: block;
    padding: 18px 20px;
    line-height: 40px;
    color: #333!important;
    transition: color .2s;
}
.nav-item-children .nav-item-children-list a:hover{
    color: #ff6700!important;
}
.nav-item-children .nav-item-children-list a img{
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 12px;
    vertical-align: middle;
}
.category-list .category-item:nth-child(1):hover .nav-item-children{
    display: block;
}
.category-list .category-item:nth-child(2):hover .nav-item-children{
    display: block;
}
.category-list .category-item:nth-child(3):hover .nav-item-children{
    display: block;
}
/* nav */
.nav-item{
    float: left;
    height: 88px;
}
.nav-item:hover .slide{
    height: 229px;
}
.nav-item a{
    display: block;
    padding: 26px 10px 38px;
    color: #000;
}
.nav-item a:hover{
    color: #ff6700;
}
/* .quan-border{
    box-sizing: border-box;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
} */
/* 展开区域 */
.slide{
    height: 0px;
    z-index: 20;
    transition: all .3s;
}
.header-nav-menu{
    position: absolute;
    top: 100px;
    left: -400px;
    width: 100vw;
    background-color: #fff;
    overflow: hidden;
    color: #e0e0e0;
}
.header-nav-menu .container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1226px;
}
.header-nav-menu .container a{
    color: #757575;
    font-size: 12px;
    text-align: center;
}
.header-nav-menu .container .xiaomishouji{
    width: 160px;
    height: 110px;
    margin: 0 auto 16px;
    margin-top: -20px;
    text-align: center;
}
.header-nav-menu .container li{
    position: relative;
    float: left;
    width: 180px;
    padding: 35px 12px 16px;
}
/* 小竖线 */
.header-nav-menu .container li::before{
    content: '';
    width: 1px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 40px;
    background-color: #e0e0e0;
}
/* 去掉第一个的竖线 */
.header-nav-menu .container li:nth-child(1):before{
    width: 0px;
}
.header-nav-menu .container .title{
    text-align: center;
}
.header-nav-menu .container img{
    width: 110px;
    height: 110px;
}
.header-nav-menu .container .price{
    color: #ff6700;
}

/* 右边搜索部分 */
.header_search{
    position: relative;
    float: right;
    width: 296px;
    height: 50px;
    margin-top: 25px;
    /* background-color: lightcoral; */
}
.search-text:focus{
    border: 1px solid #ff6700;
}
.search-text:focus+.search-slide{
    display: block;
}
.search-text:focus+.search-slide+.search-btn{
    border: 1px solid #ff6700;
}
.header_search .search-slide{
    display: none;
    position: absolute;
    left: -10px;
    top: 50px;
    z-index: 20;
    width: 253px;
    border: 1px solid #ff6700;
    border-top: 0;
    background: #fff;
}
.header_search .search-slide a{
    display: block;
    padding: 6px 15px;
    font-size: 12px;
    color: #424242;
}
.search-text{
    position: absolute;
    top:0;
    border: 1px solid #e0e0e0;
    right: 51px;
    width: 233px;
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    font-size: 14px;
    transition: all .3s;
    /* box-sizing: content-box; */
}
.search-btn{
    position: absolute;
    right: 0;
    width: 52px;
    height: 50px;
    font-size: 24px;
    line-height: 24px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    color: #616161;
    transition: all .3s;
}
.icon{
    position: absolute;
    font-size: 24px;
    line-height: 24px;
    right: 13px;
    top: 14px;
}

</style>